<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="panel-body">
	<link href="${ctx }/static/bootstrap/summernote/summernote.css" rel="stylesheet" />
	<script src="${ctx }/static/bootstrap/summernote/summernote.min.js"></script>
	<script src="${ctx }/static/bootstrap/summernote/lang/summernote-zh-CN.js"></script>
	<link href="${ctx }/static/jquery/ztree/3.5.28/css/metroStyle/metroStyle.css" rel="stylesheet" />
    <script src="${ctx }/static/jquery/ztree/3.5.28/js/jquery.ztree.all.min.js"></script>
    <!-- error message here -->
    <div id="messageBox" class="alert alert-warning hide"></div>
	<tags:message content="${message}"/>
    <c:if test="${param.type eq 'edit'}">
	<input type="hidden" id="id" name="id" value="${goods.id}" />
	</c:if>
	<!-- form filed -->
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right">商品分类:</label>
		<div class="col-xs-4">
			<input type="hidden" id="menu_cat_id" name="goodsCat.id" value="${goods.goodsCat.id }" class="required">
			<c:if test="${empty  param.type }">
			<p class="form-control-static">${param.catName }</p>
			</c:if>
			<c:if test="${param.type eq 'edit' or param.type eq 'view' }">
			<input id="catSel" type="text" readonly value="${goods.goodsCat.name }" class="form-control  required"/></a>
			</c:if>
		</div>
	</div>
     <!-- form filed -->
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right">商品名称:</label>
		<div class="col-xs-6">
			<input type="text" id="name" name="name" value="${goods.name}"
				   placeholder="商品名称" class="form-control  required">
		</div>
	</div>
     <!-- form filed -->
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right">商品编号:</label>
		<div class="col-xs-6">
			<input type="text" id="sn" name="sn" value="${goods.sn}"
				   placeholder="商品编号" class="form-control  required">
		</div>
	</div>
     <!-- form filed -->
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right">是否上架:</label>
		<div class="col-xs-6">
			<input type="radio" id="marketEnable" name="marketEnable" value="1" <c:if test="${goods.marketEnable eq 1}">checked</c:if> <c:if test="${empty goods.marketEnable}">checked</c:if>>是
			<input type="radio" id="marketEnable" name="marketEnable" value="0" <c:if test="${goods.marketEnable eq 0}">checked</c:if>>否
		</div>
	</div>
	<!-- form filed -->
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right">市场价:</label>
		<div class="col-xs-6">
			<input type="text" id="mktprice" name="mktprice" value="${goods.mktprice}"
				   placeholder="市场价" class="form-control  ">
		</div>
	</div>
    <!-- form filed -->
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right">详细描述:</label>
		<div class="col-xs-6">
			    <textarea id="intro" name="intro" placeholder="详细描述"class="form-control summernote">${goods.intro}</textarea>
		</div>
	</div>
	
	<script type="text/javascript">
		$(function(){
			//富文本
			$(".summernote").summernote({
				height:150,
				lang: 'zh-CN',
				fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36','48','72']
			});
			
			// 生成树
			var zTreeObj;
		    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
		    var setting = {
		        async: {
		            enable: true,
		            url: '${path}/product/goodsCat/treeData',
		            autoParam: ["id"]
		        },
		        data:{ // 必须使用data
		            simpleData : {
		                enable : true,
		                idKey : "id", // id编号命名
		                pIdKey : "pid", // 父id编号命名
		                rootId : 0
		            }
		        },
		        callback : { // 回调函数
		            onClick : function(event, treeId, treeNode, clickFlag) {
		                if(clickFlag) {
		                    alert(" 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
		                    setValue(treeNode.id,treeNode.name);
		                }
		            },
		            onNodeCreated: function(event, treeId, treeNode){
		            	if(treeNode.id === ${goods.goodsCat.id }){
		            		zTreeObj.selectNode(treeNode);
		            	}
		            }
		        }
		    };
			zTreeObj = $.fn.zTree.init($("#tree"), setting);
			
			$("#catSel").click(function(){ //显示树
				var cityOffset = $(this).offset();
				$("#treediv").css({
					left: cityOffset.left + "px", 
					top: cityOffset.top + $(this).outerHeight() + "px",
					width: $(this).outerWidth() + "px"
				}).slideDown("fast");
				$("body").bind("mousedown", onBodyDown);
			});
		});
		
		//点击树节点设置值
		function setValue(id, name) {
			$("#menu_cat_id").val(id);
			$("#catSel").val(name);
		}
		
		//隐藏树
		function hideMenu() {
			$("#treediv").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		
		//隐藏树事件
		function onBodyDown(event) {
			if (!(event.target.id == "treediv" || $(event.target).parents("#treediv").length>0)) {
				hideMenu();
			}
		}
	</script>
</div>
<div id="treediv" style="display: none; position: absolute; overflow-x: hidden; overflow-y: auto; height: 300px; background-color: #fff; border: 1px solid #ccc;">
<ul id="tree" class="ztree"><!-- tree here --></ul>
</div>